<template>
  <div class="title">
    <div>
      <DiyBreadcrumb></DiyBreadcrumb>
    </div>
    <div>
      <slot name="search">
        <div class="search-input">
          <el-input
            v-model="content"
            :placeholder="searchName"
            size="small"
            style="width:220px;border:0;"
            @keyup.enter.native="startSearch"
          >
            <i slot="prefix" class="search-icon" @click="startSearch">
              <img src="@assets/search-icon.png" alt="" />
            </i>
          </el-input>
          <el-tooltip class="item" effect="dark" content="筛选" placement="bottom">
            <svg v-if="iconShow" class="icon title-icon" aria-hidden="true" @click="onClick">
              <use :xlink:href="'#icon-shaixuan'"></use>
            </svg>
          </el-tooltip>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import DiyBreadcrumb from "@components/DiyBreadcrumb/index";
import { mapState, mapMutations,mapActions } from "vuex";
import Bus from "@utils/eventBus"
export default {
  name: "DiyTitle",
  data() {
    return {
      pageName: "",
      content: "",
      drawer: {},
      form:{
        id:'',
        unitName: '',
        tenantCode: '',
      },
    };
  },
  props:{
    iconShow:{
      type: Boolean,
      default: false
    },
    searchName:{
      type:String,
      default: "请输入搜索内容"
    }
  },
  computed: {
    ...mapState(["searchContent"]),
  },
  components: { DiyBreadcrumb },
  created() {
    this.pageName = this.$route.meta.title;
  },
  beforeDestroy(){
    this.content = ""
    this.SET_SEARCH_CONTENT(this.content);
  },
  methods: {
    ...mapMutations(["SET_SEARCH_CONTENT"]),
    ...mapActions("options", ["getFormShow"]),
    startSearch() {
      // 因为怕其他页面使用此方法，所以暂时先使用此方法
      this.SET_SEARCH_CONTENT(this.content);
      // 平台运维工具的搜索使用eventBus进行搜索 
      Bus.$emit('searchEnter', this.content)
    },
    onClick(){
      this.drawer = {
        show: true,
        load: false
      }
      this.getFormShow(this.drawer)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@styles/common.scss";
.footer{
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
}
.title {
  @include border_color("border_color1");
  height: 48px;
  width: 100%;
  background-color: white;
  border-radius: 4px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title-icon {
    width: 22px;
    height: 22px;
    color: #909399;
    margin-left: 30px;
    cursor: pointer;
  }
}
.search-icon {
  padding-left: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
  }
}
</style>

<style lang="scss" >

.title {
  %search {
    .el-input__inner {
      border-radius: 16px;
      border: 0;
      padding-left: 42px;
    }
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .search-input {
     @extend %search;
    .el-input__inner {
      background: #f2f4f9;
    }
    .el-input__prefix {
      display: flex;
      align-items: center;
    }
  }
}
</style>
